<template>
  <!-- 备件信息 -->
  <div class="box">
    <div class="lignBg customer_table">
      <div class="title">备件信息</div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        height="350"
        :cell-style="cellStyle"
        :row-style="rowStyle"
        :header-cell-style="headerCellStyle"
        highlight-current-row
        style="width: 100%; background: rgb(5 16 40)"
      >
        <el-table-column prop="id" label="序号" width="60"> </el-table-column>
        <el-table-column prop="name" label="名称">
          <!-- 文字滚动 -->
          <template #default="{ row }">
            <div :class="row.name.length > 4 ? 'scroll-text1' : ''">
              {{ row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="件号" width="280">
          <!-- 文字滚动 -->
          <template #default="{ row }">
            <div class="scroll-text1">
              {{ row.address }}{{ row.address.length }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="数量"> </el-table-column>
      </el-table>

      <span class="light-corner"></span>
      <span class="light-corner"></span>
      <span class="light-corner"></span>
      <span class="light-corner"></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      cellStyle: {
        "background-color": "rgb(5 16 40)",
        color: "#fff",
        border: "none",
        height: "10px",
        "font-size": "16px",
      },
      rowStyle: {
        height: "10px",
      },
      headerCellStyle: {
        "background-color": "rgb(5 16 40)",
        color: "#fff",
        border: "none",
        height: "40px",
        "font-size": "16px",
      },

      tableData: [],
    };
  },
  methods: {},
  watch: {
    info: {
      handler() {
        this.tableData = this.info.tableData
          ? JSON.parse(this.info.tableData)
          : [];
      },
      deepth: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 400px;
}
.title {
  font-size: 24px;
  background: url("@/assets/t_bg.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
  cursor: pointer;
  margin-bottom: 10px;
  color: #fff;
}

ul,
li {
  list-style: none;
  padding: 0px;
  margin: 0;
}

ul {
  width: 100%;
  margin: 10px;
  li {
    line-height: 30px;
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    &:nth-child(odd) {
      background-color: #03224f;
    }
    span {
      display: block;
      width: 50%;
      &:nth-child(2) {
        color: #00ccfe;
      }
    }
  }
}

.el-table::before {
  /* 去除下边框 */
  height: 0;
}

/* 定义滚动动画 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 这里的 -100% 表示将文字向左滚动自身宽度的距离 */
    transform: translateX(-100%);
  }
}

/* 滚动文字容器样式 */
.scroll-text {
  /* 设置容器宽度，超出部分隐藏 */
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  /* 开启滚动动画，动画持续时间为 10 秒，无限循环，线性动画 */
  animation: scroll 10s linear infinite;
}

/* 鼠标悬停时暂停动画 */
.scroll-text:hover {
  animation-play-state: paused;
}
</style>
<style >
.el-table tr.current-row > td.el-table__cell,
.el-table tr.selection-row > td.el-table__cell {
  /* background-color: #00ccfe !important; */
  color: #fff !important;
  font-weight: 700 !important;
  animation: colorChange 1s infinite alternate;
}
@keyframes colorChange {
  0% {
    background-color: rgb(5 16 40); /* 开始颜色 */
  }
  100% {
    background-color: #00ccfe; /* 结束颜色 */
  }
}
.el-table .el-table__cell.gutter {
  background: #051028;
}
</style>